vue实现打印(页面指定区域)

vue实现打印
点击【Print local range】按钮 即可看到如下效果

<template> <div id="app"> <img src="./assets/logo.png" /> <router-view /> <!-- 打印函数 --> <button @click="printPage()">Print local range</button>
<!--实际要打印的内容放在这个id="printPage"的div中--> <div id="printPage"> <!-- class="show-on-print"的标签只在打印的时候显示 --> <h1 class="show-on-print">隐藏的打印标题</h1> <table> <thead> <th>name</th> <th>title</th> <th>level</th> </thead> <tbody> <tr> <td>小明</td> <td>前端工程师</td> <td>资深专家</td> </tr> </tbody> </table> </div> </div> </template>
<script> import printer from "./components/Print"; export default { name: "App", data() { return {}; }, methods: { printPage() { printer.print("printPage", function() { console.log("打印结束"); }); } } }; </script>
<style> .show-on-print { display: none; } td { border: 1px solid #ccc; } #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>